<template>
  <div class="pld">
    <discoverm></discoverm>
    <div class="pld_main">
      <el-container>
        <el-aside width="709px" class="pldel-aside">
          <div class="pld_top">
            <div>
              <h2 style="margin: -15px 0 5px 0">{{ artist.name }}</h2>
              <img
                :src="artist.cover"
                alt=""
                style="width: 640px; height: 300px; float: left"
              />
            </div>
          </div>
          <div class="pld_mid">
            <el-tabs v-model="activeNamee" type="card" @tab-click="handleClick" style="width:100%">
              <el-tab-pane label="热门作品" name="first">
                <span class="play">
                  <i class="el-icon-video-play" @click="playMusic()">播放</i>
                  <table class="artde">
                  <tbody>
                    <tr v-for="(items,index) in artistsongs"  >
                      <td style="flex: 64" :class="{active5:index%2==0}">
                        {{index+1}}<i class="el-icon-video-play" style="margin-left:15px" @click="playMusic(items.id)"></i>
                      </td>
                      <td style="flex: 329;padding-left:20px" :class="{active5:index%2==0}" @click="toLyric(items.id)">{{items.name}}
                          <i class="el-icon-video-camera-solid" v-if="items.mv!=0"></i>
                      </td>
                      <td style="flex: 89" :class="{active5:index%2==0}">3分10秒</td>
                      <td style="flex: 329" :class="{active5:index%2==0}">{{items.al.name}}</td>
                     
                    </tr>
                  </tbody>
                  </table>
                </span>
              </el-tab-pane>
              <el-tab-pane label="所有专辑" name="second">
                  <ul class="artist_album">
                      <li v-for="items in artistalbum">
                          <img :src="items.blurPicUrl" alt="" width="145px"
                          height="120px">
                          <p style="height:20px;font-size:15px" >
                              {{items.name}}
                          </p  style="height:20px;">
                          <!-- <p>{{items.publishTime}}</p> -->
                      </li>
                  </ul>
              </el-tab-pane>
              <el-tab-pane label="相关MV" name="third">
                    <ul class="artist_album">
                      <li v-for="items in artistmv">
                          <img :src="items.imgurl" alt="" width="145px"
                          height="120px">
                          
                          <p style="height:20px;font-size:15px" >
                              {{items.name}}
                          </p  style="height:20px;">
                          <!-- <p>{{items.publishTime}}</p> -->
                         
                      </li>
                  </ul>
                  </el-tab-pane> 
              <el-tab-pane label="艺人介绍" name="fourth" style="line-height: 30px;" class="lol">
                 <h2 style="width:640px;height:19px;margin-bottom:15px">{{artist.name}}简介</h2>
                  <p style="width:640px" >
                   {{artistdesc.briefDesc}}
                  </p>
                  <h2 style="width:640px;height:19px;margin-bottom:8px">代表作品</h2>
                  <p v-if="artistdesc.introduction[0]!=''">{{artistdesc.introduction[0]}}</p>
                  <h2 style="width:640px;height:19px;margin-bottom:8px">主要成就</h2>
                  <p v-if="artistdesc.introduction[0]!=''"> {{artistdesc.introduction[1]}}</p>
                  <h2 style="width:640px;height:19px;margin-bottom:8px">演艺经历</h2>
                  <p v-if="artistdesc.introduction[0]!=''">{{artistdesc.introduction[2]}}</p>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-aside>
        <el-main width="270" class="pldel-main">
          <span style="font-size:12px">热门歌手</span>
           <el-divider></el-divider>
           <ul>
             <li style="width:50px;height:92px;float:left;margin-left:25px" v-for="(item,index) in hotA" v-if="index<=5">
               <img :src="item.picUrl" alt="" width="50px">
               <span style="font-size:12px">{{item.name}}</span>
             </li>
            
           </ul>
           <span style="font-size:12px">网易云音乐多段下载</span>
           <el-divider></el-divider>
        </el-main>
      </el-container>
    </div>
    <div class="player">
      <!-- autoplay 自动播放 -->
      <audio :src="musicUrl" controls autoplay class="player_audio" ></audio>
    </div>
  </div>
</template>

<script>
import discoverm from "@/views/discoverM/discoverM.vue";
import axios from "axios";
export default {
  name: "artistdetail",
  components: {
    discoverm,
  },
  data() {
    return {
      artist: [],
      artistsongs:[],
      artistdesc:{},
      activeNamee: "first",
      artistalbum:[],
      artistmv:[],
      musicUrl:"",
      hotA:[]
    };
  },
  created() {
    axios({
      url: "http://localhost:3000/top/artists",
      method: "get",
      params: {
        
      },
    }).then((res) => {

      this.hotA = res.data.artists;
    });
    axios({
      url: "http://localhost:3000/artist/detail",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {

      this.artist = res.data.data.artist;
    });
    axios({
      url: "http://localhost:3000/artists",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {

    this.artistsongs = res.data.hotSongs;
    });
    axios({
      url: "http://localhost:3000/artist/desc",
      method: "get",
      params: {
        id: this.$route.query.id,
      },
    }).then((res) => {
   
    this.artistdesc = res.data;
    });
    axios({
      url: "http://localhost:3000/artist/album",
      method: "get",
      params: {
        id: this.$route.query.id,
        limit:12
      },
    }).then((res) => {
    this.artistalbum = res.data.hotAlbums;
    });
    axios({
      url: "http://localhost:3000/artist/mv",
      method: "get",
      params: {
        id: this.$route.query.id,

      },
    }).then((res) => {
      console.log(res);
      this.artistmv = res.data.mvs;
    });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style>
.pld_top {
  width: 640px;
  height: 310px;
}
.pld_mid {
  width: 640px;
  height: 471px;
  margin-top: 27px;
}
.el-tab-pane {
  color: rgb(24, 24, 24);
}
.play {
  background-color: rgb(79, 154, 225);
  width: 100px;
  height: 31px;
  color: #fff;
}
.artde tbody tr{
 display: flex;
color: rgb(24, 24, 24);
}
.artde{
    width: 100%;
}
.artde tr {
    width: 100%;
}

.active5 {
    background-color: rgb(247,247,247);
}
.artde td {
    display: block;
   width: 100%;
   height: 32px;
   line-height: 32px;
}
.el-icon-video-camera-solid {
    color: red;
}
.el-tab-pane {
    font-size: 12px;
}
.pld_mid el-tab-pane{
    line-height: 15px;
}
.lol p {
    margin-bottom: 10px;
}
.lol h2 {
    border-left: 2px solid red;
    line-height: 20px;
    padding-left: 3px;
}
.artist_album{
    display: flex;
    flex-wrap: wrap;
}
.artist_album li{
   width: 145px;
   height: 175px;
   margin-right: 15px;
}
</style>